<template>
  <div class="job_item">
    <div class="jobCard" @click="toDetail(jobItem.id)">
      <van-row type="flex" align="top" justify="space-between" class="job_salary">
        <van-col span="11" class="job">{{ jobItem.enterprise_name }}</van-col>
        <van-col span="12" class="salary_mode">{{ computedMoneyModeText }}</van-col>
      </van-row>

      <van-row type="flex" align="center" justify="space-between" class="jobType_rating">
        <van-col span="10" class="jobType">
          <span>{{ jobItem.recruiting_position }}</span>
        </van-col>
        <van-col span="14" class="salary">
          综合薪资：<span>{{ jobItem.min_comprehensive_salary }} - {{ jobItem.max_comprehensive_salary }}</span>
        </van-col>
      </van-row>

      <van-row type="flex" align="center" justify="space-between" class="jobType_rating">
        <van-col span="12" class="jobType">
          <span>{{ jobCategoryObj[jobItem.job_category_id] }}</span>
        </van-col>

        <van-col span="12" class="rating">
          <span>代招费：</span>
          <span>{{ jobItem.generation_of_commission }}{{ feeUnitObj[jobItem.fee_unit] }}</span>
        </van-col>
      </van-row>

      <van-row type="flex" align="center" justify="space-between" class="address_distance">
        <van-col span="7" class="company" @click.stop="
          toMapPage_job(
            jobItem.lng || jobItem.zqlng,
            jobItem.lat || jobItem.zqlat,
            jobItem.fulle_address || jobItem.zq_address
          )
        ">
          <van-button type="primary" size="mini" plain hairline round color="#7232dd" style="padding: 3px 6px">
            <van-icon name="location-o" size="12" />
            <span>招企</span>
          </van-button>
        </van-col>
        <van-col span="10" style="text-align: center" @click.stop="
          toMapPage_job(
            jobItem.interview_address_lng,
            jobItem.interview_address_lat,
            jobItem.interview_address_fulle_address
          )
        ">
          <van-button type="primary" size="mini" plain hairline round color="#7232dd" style="padding: 3px 6px">
            <van-icon name="location-o" size="12" />
            <span>面试</span>
          </van-button>
        </van-col>
        <van-col span="7" class="address_work" @click.stop="
          toMapPage_job(jobItem.work_address_lng, jobItem.work_address_lat, jobItem.work_address_fulle_address)
        ">
          <van-button type="primary" size="mini" plain hairline round color="#7232dd" style="padding: 3px 6px">
            <van-icon name="location-o" size="12" />
            <span>上班</span>
          </van-button>
        </van-col>
      </van-row>

      <van-row type="flex" justify="space-between" class="time_status" align="center">
        <van-col v-show="collectionId != 1" span="16" class="time">
          {{
            [
              'recruitmentManagement',
              'upstreamDownstreamManagement',
              'getApplyCost',
              'invitationsIssued',
              'myCompany_myPublish',
              'companyHome'
            ].includes(keyWord)
            ? '发布时间'
            : '报名时间'
          }}：
          <span>
            {{
              [
                'recruitmentManagement',
                'upstreamDownstreamManagement',
                'getApplyCost',
                'invitationsIssued',
                'myCompany_myPublish',
                'companyHome'
              ].includes(keyWord)
              ? jobItem.create_time
              : jobItem.signuptime
            }}
          </span>
        </van-col>

        <van-col span="4" class="status" v-show="!workInfoType && allUserInfo.company_certification_state === 2"
          @click.stop="toShare_jobContent(jobItem)">
          <van-button icon="share" size="mini" color="#B223ED">
            {{ jobItem.applystatus ? jobItem.applystatus : '转发' }}
          </van-button>
        </van-col>

        <!-- 招工状态, 除了我的发布页面，其他页面都要显示 在招、停招-->
        <van-col span="4" class="status" v-if="!workInfoType" @click.stop="showRecruitOptions"
          v-show="!(keyWord === 'myCompany_myPublish')">
          <van-button size="mini" :color="computedRecruitColor">{{ computedRecruitStatus }}</van-button>
        </van-col>

        <!-- 工作的审核状态（需要后台审核的审核结果） -->
        <van-col span="4" class="status" v-show="keyWord === 'myCompany_myPublish'">
          <van-button size="mini" v:if="{{}}" :color="computedAuditColor">
            {{ jobItem.status | formatJobStatus }}
          </van-button>
        </van-col>
      </van-row>

      <!-- 上下游公司, 由于每个公司的申请时间不一样，无法显示该页面   -->
      <!--      <van-row v-if="$route.name === 'upAndDownstreamCompany' && type != 1">
        <van-col v-show="jobItem.auditdate" span="24" class="time">
          申请时间：
          <span>{{ jobItem.apptime }}</span>
        </van-col>
        <van-col v-show="jobItem.auditdate" span="24" class="time">
          {{ jobItem.audit === 1 ? '授权时间' : '未授权时间' }}：
          <span>{{ jobItem.auditdate }}</span>
        </van-col>
      </van-row>-->

      <!--  适用于招聘管理的页面    -->
      <van-row type="flex" justify="space-between" align="center" class="time_status"
        v-show="keyWord === 'recruitmentManagement'">
        <!--   报名信息     -->
        <van-col span="14" class="time" v-show="
          !workInfoType &&
          advaceInfotype != 5 &&
          advaceInfotype != 1 &&
          advaceInfoType != 1 &&
          advaceInfoType != 3 &&
          advaceInfotype != 3
        ">
          {{ titleName ? titleName : '报名未读' }}：
          <span style="font-weight: bolder; color: black;">
            {{ computedReadStatusText }}
          </span>
        </van-col>

        <!--   工作信息     -->
        <van-col span="12" class="time" v-show="workInfoType">
          {{ workInfoTextObj[workInfoText] }}：
          <span style="font-weight: bolder; color: #FF976A; ">
            {{ computedWorkInfoText || '暂无' }}
          </span>
        </van-col>

        <van-col span="14" class="time" v-show="advaceInfoType == 3">
          <span style="font-weight: bolder; color: black;"> </span>
        </van-col>

        <van-col span="10" class="time" v-show="advaceInfoType == 1">
          {{ !!titleName ? titleName : '借支人数' }}：
          <span style="font-weight: bolder; color: blue;">
            {{
              searchNameType == 'in_application'
              ? jobItem.in_application_count
              : searchNameType == 'lend'
                ? jobItem.lend_count
                : searchNameType == 'dont_lend'
                  ? jobItem.dont_lend_count
                  : 0
            }}
          </span>
        </van-col>
        <!--  是否隐藏此按钮      -->
        <van-col span="10" class="status" v-show="!(routeName === 'recruitStaffList')">
          <van-button plain type="info" size="mini" color="#7232dd" @click.stop="toViewStaffInfoList(jobItem)">
            查看招聘员工
          </van-button>
        </van-col>
      </van-row>

      <!--  上下游管理    -->
      <van-row type="flex" :justify="type == 0 || type == 3 ? 'space-between' : 'end'" align="center" class="time_status"
        v-show="keyWord === 'upstreamDownstreamManagement' || keyWord === 'invitationsIssued'">
        <van-col span="8" class="time" v-show="type == 0 || type == 3">
          {{ type == 0 || type == 3 ? '下游公司数：' : '上游公司数：' }}
          <span style="font-weight: bolder; color: black;">
            {{ (type == 0 || type == 3) && (type == 0 ? jobItem.apply : jobItem.audit_forward_count) }}
          </span>
        </van-col>
        <van-col span="16" class="status" v-if="!needStaff">
          <van-button plain type="info" size="mini" color="#7232dd" @click.stop="toUpAndDownstreamCompany(type)">
            {{ transmitStr }}
            {{
              routeName === 'upAndDownstreamCompany'
              ? null
              : type == 0 || type == 3
                ? '，查看下游公司'
                : '，查看上游公司'
            }}
          </van-button>
        </van-col>
        <van-col span="12" class="status" v-else>
          <van-button plain type="info" size="mini" color="#7232dd" @click.stop="getStaff(jobItem)">
            {{ transmitStr }}，查看员工
          </van-button>
        </van-col>
      </van-row>

      <van-row type="flex" justify="space-between" align="center" class="time_status" v-show="searchType == 1">
        <!--  搜索显示，暂时不做      -->
        <van-col span="10" class="time" v-if="searchVal !== ''">
          搜索显示:
          <span style="font-weight: bolder; color: black;">{{ searchVal }}</span>
        </van-col>
        <van-col span="8" class="time" v-if="downstream" style="text-align:right">
          已授权公司:
          <span style="font-weight: bolder; color: black;text-align:right">{{ 1111 + '数据' }}</span>
        </van-col>
        <!--  advaceInfotype取值： 2为报名信息，不等于2且必须是recruitStaffList页面      -->
        <van-col span="8" class="time" v-else style="text-align:left;"
          v-show="advaceInfotype != 2 && advaceInfotype != 1 && $route.name === 'recruitStaffList'">
          辞职人数：
          <span style="font-weight: bolder; color: black;text-align:right">{{ jobItem.resign_count }}</span>
        </van-col>
      </van-row>

      <!-- 2022-04-03新需求：招聘信息备注         -->
      <van-row class="job_notes" type="flex" justify="start" v-show="
        ['myCompany_myPublish', 'companyHome'].includes(keyWord) &&
        jobItem.creator_user_id === allUserInfo.id &&
        jobItem.job_notes
      ">
        <van-col span="6" class="notes_title">
          <span>招聘信息备注：</span>
        </van-col>
        <van-col span="18" class="notes_text">
          <span>{{ jobItem.job_notes || '无' }}</span>
        </van-col>
      </van-row>
    </div>

    <!--  防止事件冒泡  -->
    <van-action-sheet v-model="recruitOptions" :actions="recruitActions" cancel-text="取消" close-on-click-action
      @select="changeRecruitStatus" />

    <van-action-sheet v-model="shareAuth" :actions="shareAuthActions" cancel-text="取消" close-on-click-action
      @select="changeShareAuth" />
  </div>
</template>

<script>
import { Dialog, Toast } from 'vant'
import jobCategoryObj from '../../../../constants/jobCategoryObj'
import { payMoneyModeObj } from '../../../../constants/payMoneyMode'
import { feeUnitObj, recruitStatusObj } from '../../../../constants/comUtils'
import { formatJobStatus } from '../../../../utils/format'
import { mapGetters } from 'vuex'
import {
  workQuitStatusObj,
  workQuitAuditStatusColor,
  workStatusDesc,
  workStatusDescColor
} from '../../../../utils/comTools'
import logoImg from '@/assets/logo.png'
import { isOtherCompanyCanShare } from '../../../../utils/validate'

const workInfoTextObj = {
  OnJob: '在职',
  Resign: '已离职',
  Leave: '自离',
  Approval: '辞职批准',
  NonApproval: '辞职不批准',
  Applying: '辞职申请中',
  Pending: '未入职'
}

export default {
  name: 'jobItemForRecruit',
  props: [
    'workInfoText',
    'needStaff',
    'searchVal',
    'collectionId',
    'jobItem',
    'keyWord',
    'path',
    'routeName',
    'searchName',
    'titleName',
    'workInfoType',
    // todo Type是大写、小写之分
    'advaceInfoType',
    'advaceInfotype',
    'typeenrool',
    'searchType',
    'transmitStr',
    // 报名未读、已读这两种状态：-1全部、0未读、1已读
    'searchNameType',
    'salary',
    // 上下游的标识：type == 0（收到的） || type == 3（支付合作费）。均为下游公司进行操作的，
    'type',
    'title',
    'downstream'
  ],
  data() {
    return {
      workInfoTextObj,
      workQuitStatusObj,
      workStatusDesc,
      workStatusDescColor,
      logoImg,
      feeUnitObj,
      payMoneyModeObj,
      jobCategoryObj,
      recruitOptions: false,
      recruitActions: [
        {
          name: '默认',
          subname: '选择默认，在招与停招跟随上游变动'
          // className: this.jobItem.switch_state === -1 ? 'activeOption' : ''
        },
        {
          name: '在招',
          subname: '选择在招，用户就可以报名找工作'
          // className: this.jobItem.switch_state === 0 ? 'activeOption' : ''
        },
        {
          name: '停招',
          subname: '选择停招，用户就无法报名找工作'
          // className: this.jobItem.switch_state === 1 ? 'activeOption' : ''
        }
      ],
      shareAuth: false,
      shareAuthActions: [{ name: '全职' }, { name: '兼职' }, { name: '小时工' }]
    }
  },
  mounted() {
    // console.log('关键词keyWord为：', this.keyWord)
    this.shareAuth = false
  },

  watch: {
    // 可以实现, 但是由于几乎每个组件都使用, 耗费性能
    /*jobItem: {
      deep: true,
      handler(newValue, oldVal) {
        console.log('招聘信息的变化，其中0：在找状态 ， 1： 停招状态', newValue.switch_state, oldVal.switch_state);
        // todo 监视属性变化，修改 recruitActions 的值
        console.log('');
      }
    }*/
  },
  methods: {
    getStaff(val) {
      this.$emit('getStaff', val)
    },
    //辞职
    resign(id) {
      this.$router.push({
        path: '/myCompany/resign',
        query: {
          id
        }
      })
    },
    toDetail(id) {
      if (this.routeName != 'jobDetail') {
        // 我的公司---发布职位
        if (this.keyWord === 'myCompany_myPublish') {
          // todo
          let jobObj = {
            job_category_id: this.jobItem.job_category_id,
            // todo 若是查看审核状态。 此处的id为job_id。不应该是转发
            job_id: this.jobItem.id,
            // 审核的职位
            keyword: 'auditState'
          }
          this.$router.push({
            path: '/myCompany/canShareAndAuditState',
            query: {
              // 将传递的对象解析为字符串
              jobObj: JSON.stringify(jobObj)
            }
          })
        } else if (this.keyWord === 'myCompany_jobSheet') {
          // todo 招聘信息录入页
          let jobObj = {
            job_category_id: this.jobItem.job_category_id,
            job_id: this.jobItem.id
          }
          this.$router.push({
            path: '/info',
            query: {
              // 将传递的对象解析为字符串
              jobObj: JSON.stringify(jobObj)
            }
          })
        } else {
          // 跳转至详情页
          this.$router.push({
            path: '/jobDetail',
            query: {
              id,
              sign_state: this.jobItem.sign_state,
              sign_remark: this.jobItem.sign_remark,
              com_type:1
            }
          })
          // todo 浏览记录仅首页保存信息
          if (this.keyWord === 'only_home') {
            this.$emit('saveBrowsingHistoryList', this.jobItem)
          }
        }
      }
    },

    toViewCommentAndRate() {
      // todo 携带参数id
      this.$router.push('/myCompany/ratingList')
    },
    copy(str) {
      var save = function (e) {
        e.clipboardData.setData('text/plain', str) //下面会说到clipboardData对象
        e.preventDefault() //阻止默认行为
      }
      document.addEventListener('copy', save)
      document.execCommand('copy') //使文档处于可编辑状态，否则无效
    },
    toMapPage_job(longitude, latitude, fulle_address) {
      if (!fulle_address) {
        Dialog.alert({
          title: '抱歉',
          message: '没有获取到地址，请点击进入职位详情页查看。',
          messageAlign: 'left'
        })
        return
      }
      const destinationPosition = {
        longitude: longitude,
        latitude: latitude,
        address: fulle_address,
        FullAddress: fulle_address
      }

      //弹出复制窗口
      Dialog.confirm({
        title: '点击确认复制地址到剪贴板',
        message: `地址：${fulle_address}`,
        showCancelButton: true
      })
        .then(() => {
          // on close
          this.copy(fulle_address)
          Toast('已复制')
        })
        .catch(() => {
          // on cancel
        })

      // todo url里面带有参数对象
      // 路由传参 https://www.jianshu.com/p/d276dcde6656
      // this.$router.push({
      //   path: '/map',
      //   query: {
      //     // 将传递的对象解析为字符串
      //     destinationPosition: JSON.stringify(destinationPosition)
      //   }
      // })
    },

    toShare_jobContent(jobItem) {
      localStorage.setItem('jobItem', jobItem)
      let allCertificate = window.localStorage.getItem('allCertificate')
      // 有登录凭证才能看到
      if (
        allCertificate &&
        this.allUserInfo.certification_state === 2 &&
        this.allUserInfo.company_certification_state === 2
      ) {
        if (+jobItem.forward_state === 1) {
          // 个人账户异常接口（被举报, 不能转发）
          Dialog.confirm({
            title: '账户异常',
            message: jobItem.forward_remark || '当前账户异常，可能被举报了。',
            messageAlign: 'left',
            confirmButtonText: '请联系近聘客服'
          })
            .then(() => {
              this.$router.push({
                name: 'customer_service'
              })
            })
            .catch(() => {
              // on cancel
            })
          return null
        }

        // 自己转发自己
        if (jobItem.creator_user_id === this.allUserInfo.id) {
          this.shareAuth = true
          return null
        }

        // 别的公司转发职位是都有权限
        isOtherCompanyCanShare(jobItem.id).then(isHasShareAuth => {
          if (isHasShareAuth) {
            this.shareAuth = true
          }
        })
      } else {
        Toast('您不能转发，请退出登录重试。')
      }
    },

    async apply() {
      const formData = {
        job_id: this.jobItem.id
      }
      const res = await this.$api.job.sendTransmit(formData)
      if (res.code === 200) {
        Toast('已提交申请！请耐心等待上游公司的审核。')
      }
    },

    goToNeedPage(keyWord, salaryInfoId) {
      const id = this.jobItem.id
      if (keyWord === 'lendMoney') {
        // todo 联调时修改
        if (this.jobItem.isLendMoney === 1) {
          if (
            this.path === '/lendMoneyRecords' ||
            this.path === '/searchRecords/lendMoney' ||
            this.path === '/queryRecords/lendMoney'
          ) {
            this.$router.push({
              path: `/lendMoneyDetail/${id}`
            })
          } else {
            if (this.jobItem.work_end_time) {
              Dialog.alert({
                message: '您已离职，无法借支。如有疑问，请联系客服。',
                theme: 'round-button'
              }).then(() => {
                // on close
              })
            } else {
              this.$router.push({
                path: '/applyLendMoney',
                query: {
                  id: id
                }
              })
            }
          }
        } else {
          if (this.jobItem.work_end_time) {
            Dialog.alert({
              message: '您已离职，无法借支，如有疑问请联系客服。',
              theme: 'round-button',
              messageAlign: 'left'
            }).then(() => {
              // on close
            })
          } else {
            this.$router.push({
              path: '/applyLendMoney',
              query: {
                id: id
              }
            })
          }
        }
      } else {
        this.$router.push({
          path: `/wageDetail/${id}`,
          query: {
            jobuserid: '',
            salaryinfoid: salaryInfoId
          }
        })
      }
    },

    toLendDetailPage() {
      const id = this.jobItem.id
      this.$router.push({
        path: `/lendMoneyDetail/${id}`
      })
    },

    toRatePage() {
      const id = this.jobItem.id
      this.$router.push({
        path: `/rate/${id}`
      })
    },

    showRecruitOptions() {
      if (this.keyWord === 'companyHome') {
        this.recruitOptions = true
      }
    },
    // 改变招聘状态：停招、在招
    changeRecruitStatus(item, index) {
      // console.log('当前操作', item.name, index);
      if (this.keyWord === 'companyHome') {
        // 默认的下标为0, 在招的下标为1, 停招的下标为2;
        if (this.jobItem.switch_state * 1 === index - 1) {
          Toast(`当前是：【${item.name}】状态，不能重复操作！`)
        } else {
          Dialog.confirm({
            title: '温馨提示',
            message: `你确定设置为：【${recruitStatusObj[index]}】吗？`,
            messageAlign: 'left'
          })
            .then(() => {
              const stateObj = {
                '0': '-1',
                '1': '0',
                '2': '1'
              }
              const paramObj = {
                job_id: this.jobItem.id,
                // 接口参数值state：状态值， -1：默认, 0：在找,  1：停招
                state: stateObj[index]
              }
              // console.log('参数', paramObj)
              this.$emit('changeJobStatus', paramObj)
            })
            .catch(() => {
              // 取消
            })
        }
      }
    },

    changeShareAuth(item, index) {
      console.log('转发的操作', item, index)
      // 添转发布页  转发需要的参数对象
      let shareJobObj = {
        // 转为字符串
        job_category_id: index + 1 + '',
        // todo 若为转发时，此处的id为转发的id, 即: parent_job_id
        job_id: this.jobItem.id,
        keyword: 'canShare'
      }
      this.$router.push({
        path: '/myCompany/canShareAndAuditState',
        query: {
          // 将传递的对象解析为字符串
          jobObj: JSON.stringify(shareJobObj)
        }
      })
    },

    toViewStaffInfoList(data) {
      // console.log('参数data---就是每个职位数据', data)

      if (this.advaceInfoType == '5') {
        // 工作信息
        this.$router.push({
          path: '/myCompany/recruitStaffList',
          query: {
            jobInfoId: data.id,
            advaceInfoType: 5,
            data: JSON.stringify(data)
          }
        })
      }

      if (this.typeenrool) {
        // 报名信息
        this.$router.push({
          path: '/myCompany/recruitStaffList',
          query: {
            jobInfoId: data.id,
            advaceInfoType: 2,
            data: JSON.stringify(data),
            // 搜索的关键字
            searchVal: this.searchVal
          }
        })
      } else if (this.salary) {
        //工资信息
        this.$router.push({
          path: '/myCompany/recruitStaffList',
          query: {
            jobInfoId: data.id,
            advaceInfoType: 3,
            data: JSON.stringify(data)
          }
        })
      } else if (this.advaceInfoType != '5') {
        //借支信息
        this.$router.push({
          path: '/myCompany/recruitStaffList',
          query: {
            jobInfoId: data.id,
            advaceInfoType: 1,
            data: JSON.stringify(data)
          }
        })
      } else {
      }
    },

    toUpAndDownstreamCompany(type) {
      if (this.routeName === 'upAndDownstreamCompany') {
        // Toast('不可点击！')
        return null
      }
      this.$router.push({
        path: '/myCompany/upAndDownstreamCompany',
        query: {
          // type就是哪个页面跳转过来的
          type: type,
          title: this.title,
          jobItem: JSON.stringify(this.jobItem || {}),
          transmitStr: this.transmitStr
        }
      })
    }
  },

  computed: {
    ...mapGetters(['allUserInfo']),

    computedReadStatusText() {
      switch (this.searchNameType) {
        case '-1':
          return `未读：${this.jobItem.not_readed_applies_count || this.jobItem.unread_count || 0}，已读：${this.jobItem
            .readed_applies_count || 0}`
        case '0':
          return this.jobItem.not_readed_applies_count || this.jobItem.unread_count || 0
        case '1':
          return this.jobItem.readed_applies_count || 0
      }
    },

    computedWorkInfoText() {
      // 不同字符串对应着接口的不同字段。
      const workInfoFieldName = {
        OnJob: 'onjob_count',
        Resign: 'resign_count',
        Leave: 'leave_count',
        Approval: 'approval_count',
        NonApproval: 'non_approval_count',
        Applying: 'applying_count',
        Pending: 'pending_count',
        // 非在职人数 = 自离人数 + 辞职人数
        Others: 'not_onjob_count'
      }
      return this.jobItem[workInfoFieldName[this.workInfoText]]
    },
    computedMoneyModeText() {
      const res2 = this.payMoneyModeObj[this.jobItem.payway_id]
      if (res2) {
        const res_job = res2.split('+')
        if (this.jobItem.second_value_input && this.jobItem.third_value_input) {
          return (
            res_job[0].trim() +
            this.jobItem.first_value_input +
            ' + ' +
            res_job[1].trim() +
            this.jobItem.second_value_input +
            ' + ' +
            res_job[2].trim() +
            this.jobItem.third_value_input
          )
        } else if (this.jobItem.second_value_input) {
          return (
            res_job[0].trim() +
            this.jobItem.first_value_input +
            ' + ' +
            res_job[1].trim() +
            this.jobItem.second_value_input
          )
        } else {
          return res_job[0].trim() + this.jobItem.first_value_input
        }
      }
    },

    isShowStartEndTime() {
      return this.keyWord === 'hasWorkedList' || this.keyWord === 'lendMoney' || this.keyWord === 'wageSettlement'
    },

    // 辞职状态的颜色
    computedWorkStatusColor() {
      return workQuitAuditStatusColor(this.jobItem.resign_application_status)
    },

    // 后台审核的状态
    computedAuditColor() {
      switch (this.jobItem.status) {
        case 0:
          return '#1989FA'
        case 1:
          return '#07C160'
        case 2:
          return '#EE0A24'
      }
    },
    // 招聘状态 的颜色
    computedRecruitColor() {
      switch (this.jobItem.switch_state) {
        case -1:
          return '#1989FA'
        case 0:
          return '#36D7B7'
        case 1:
          return '#EE0A24'
        default:
          return '#36D7B7'
      }
    },

    // 招聘状态 的文本
    computedRecruitStatus() {
      switch (this.jobItem.switch_state) {
        case -1:
          return '默认'
        case 0:
          return '在招'
        case 1:
          return '停招'
        default:
          return '在招'
      }
    },

    computedBtnText() {
      // 申请过
      if (this.jobItem.isLendMoney === 1) {
        if (
          this.path === '/lendMoneyRecords' ||
          this.path === '/searchRecords/lendMoney' ||
          this.path === '/queryRecords/lendMoney'
        ) {
          return '查看详情'
        } else {
          return '继续申请'
        }
      } else {
        return '点我申请'
      }
    },
    computedBtnType() {
      if (this.jobItem.isLendMoney === 1) {
        if (
          this.path === '/lendMoneyRecords' ||
          this.path === '/searchRecords/lendMoney' ||
          this.path === '/queryRecords/lendMoney'
        ) {
          return 'warning'
        } else {
          return 'danger'
        }
      } else {
        return 'danger'
      }
    }
  },

  filters: {
    formatJobStatus(status) {
      return formatJobStatus(status)
    },
    //处理时间--
    needDateFormat(date) {
      return date
    }
  }
}
</script>

<style lang="scss" scoped>
.job_item {
  .jobCard {
    background-color: #ffffff;
    border-bottom: 0.6px solid #e6e6e6;
    margin: 0;
    padding: 9px 10px;
    font-size: 13px;
    color: #848484;

    .job_salary {
      font-size: 14px;

      //border: 1px solid red;
      .job {
        // width:auto;
        font-size: 16px;
        font-weight: bolder;
        color: #030303;
        //border: 1px solid blue;
        white-space: pre-wrap;
        word-break: break-all;
      }

      .salary_mode {
        color: blue;
        font-weight: bolder;
        font-size: 12px;
        text-align: right;
        white-space: pre-wrap;
        word-break: break-all;
      }
    }

    .jobType_rating {
      font-size: 15px;
      margin: 6px 0;
      color: #030303;

      .salary {
        text-align: right;

        span {
          color: #fc525d;
        }
      }

      .rating {
        text-align: right;
      }
    }

    .address_agencyFee {
      color: #363636;

      .agencyFee {
        text-align: right;
      }
    }

    .address_distance {
      color: #5f5f5f;
      margin: 6px 0;

      .address_work {
        text-align: right;
      }
    }

    .time_status {
      margin-top: 5px;
      flex-wrap: nowrap;

      .status {
        text-align: right;
        white-space: nowrap;
        //   display: flex;
        // flex-direction: column;
        // justify-content: space-between;
      }

      .status_score {
        margin-right: 15px;
      }

      .statusPopup {
        box-sizing: border-box;
        padding: 30px 0px;
        overflow: hidden;

        div {
          display: flex;
          // width: 100%;
          // justify-content: space-around;
          padding: 10px 0;
          border-radius: 10px;

          // margin: 0 5px;
          span {
            text-align: center;
            font-size: 16px;
            user-select: none;

            &:first-child {
              width: 80px;
              border-right: 1px solid #a3a3a3;
            }

            &:last-child {
              margin-left: 10px;
            }
          }

          &.active {
            color: red;
            // background: #f7f7f7;
            box-shadow: 0 0 3px 0 #d2d2d2;

            span {}
          }
        }

        button {
          display: flex;
          width: 95%;
          justify-content: center;
          align-items: center;
          margin: 15px auto 5px auto;

          span {
            border: none !important;
          }
        }
      }
    }

    .work_status {
      margin-top: 5px;
      box-sizing: border-box;

      .status {
        white-space: nowrap;
        width: 23%;

        button {
          width: 100%;
          border: 1px solid #1989fa !important;
          background: transparent !important;
          color: #1989fa !important;
          border-radius: 10px;
        }
      }
    }

    .job_notes {
      font-size: 12px;
      color: black;
      margin-top: 6px;

      .notes_title {
        font-weight: bolder;
        color: #007aff;
      }

      .notes_text {
        text-align: justify;
      }
    }
  }

  .activeOption {
    font-weight: bolder;
    color: #ee0a24;
  }
}
</style>
